<template>
  <div id="myNav">
    <!--    logo-->
    <div class="logo">
      <img src="../assets/images/logo.jpg" alt="">
      <span>MK Sysytem</span>
    </div>
    <!--    用户信息-->
    <div class="user">
      <!--      <img :src="userSrc" alt="">-->
      <div class="avater-wrap">
<!--        TODO: 图片引入-->
        <img src="../assets/images/userAvater/1.jpg" alt="">
<!--        <img :src="imgSrc" alt="">-->
      </div>
      <div class="username-wrap">
        <span>{{levelGE}}:{{username}}</span>
      </div>
    </div>
    <!--    导航-->
    <el-row class="tac">
      <el-col :span="24">
        <el-menu
          :unique-opened="true"
          router
          background-color="transparent"
          text-color="#fff"
          default-active="/home"
          class="el-menu-vertical-demo">
          <el-menu-item index="/home">
            <!--            <i class="el-icon-menu"></i>-->
            <span slot="title">首页</span>
          </el-menu-item>
          <!--          商品管理-->
          <el-submenu index="1">
            <template slot="title">
              <!--              <i class="el-icon-location"></i>-->
              <span>商品管理</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/goodsManageList">商品列表</el-menu-item>
              <el-menu-item index="/goodsManageAdd">发布商品</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <!--          订单管理-->
          <el-menu-item index="/order">
            <!--            <i class="el-icon-menu"></i>-->
            <span slot="title">订单管理</span>
          </el-menu-item>
          <!--        供应商管理  -->
          <el-menu-item index="/supportList">
            <!--            <i class="el-icon-menu"></i>-->
            <span slot="title">供货商列表</span>
          </el-menu-item>
          <!--          活动和优惠券-->
          <el-submenu index="4">
            <template slot="title">
              <!--              <i class="el-icon-document"></i>-->
              <span>活动和优惠券</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="/youhujuan">我的优惠券</el-menu-item>
              <el-menu-item index="/discount">我的活动</el-menu-item>
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="/workerInfo" v-if="isAdmin">
            <!--            <i class="el-icon-menu"></i>-->
            <span slot="title">员工信息查看修改</span>
          </el-menu-item>
        
        </el-menu>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {mapState,mapGetters} from 'vuex'
  export default {
    name: "MyNav",
    computed: {
      ...mapState({
        'imgSrc': state => state.indexStore.imgSrc,
        'username': state => state.indexStore.username,
        'level': state => state.indexStore.level
      }),
      ...mapGetters(['levelGE']),
      isAdmin() {
        return this.level==='admin'? true:false
      }
    },
    data(){
      return {
      }
    },
    created() {
    
    }
  }
</script>

<style lang="less" scoped>
  #myNav {
    .logo {
      height: 60px;
      line-height: 60px;
      text-align: center;
      border-bottom: 1px solid rgba(255, 255, 255, 0.18);
      img {
         vertical-align: middle;
         border-radius: 50%;
         width: 50px;
       }
        span {
          color: white;
        }
      }
      .user {
        height: 150px;
        .avater-wrap {
          padding: 10px;
          vertical-align: middle;
    
          img {
            width: 100px;
            border-radius: 50%;
            border: 2px solid rgba(0, 0, 0, 0.35);
          }
        }
      .username-wrap {
        color: white;
        font-size: 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.15);
        padding-bottom: 10px;
      }
    }
  }
</style>